---
title: 透過 CDN 使用 Univer
---

若您不使用套件管理工具，也可以透過 `<script>` 標籤引入 Univer。

## 命名空間規範

Univer 的全域建置（UMD）會在全域物件上曝露一個命名空間，其命名規範如下：

```plain
# 預設
@univerjs/presets -> UniverPresets
@univerjs/preset-docs-core -> UniverPresetDocsCore
@univerjs/preset-docs-core/locales/zh-TW -> UniverPresetDocsCorezhTW

# 外掛
@univerjs/core -> UniverCore
@univerjs/docs-ui -> UniverDocsUi
@univerjs-pro/docs-print -> UniverProDocsPrint
@univerjs/docs-ui/locale/zh-TW -> UniverDocsUizhTW
@univerjs/core/facade -> UniverCoreFacade
```

## 預設模式 [#preset-mode]

### 使用全域建置版本

我們已在主流 CDN 服務（例如 [jsDelivr](https://www.jsdelivr.com)、[unpkg](https://unpkg.com)）提供 Univer 的 UMD 版本。您可以於 HTML 檔案中直接引入這些資源（當然也可以先下載後，改由自有伺服器或自建 CDN 佈署）：

<Callout type="warning" title="注意事項">
  透過 `<script>` 標籤引入 Univer 的 UMD 套件，使用方式與透過套件管理工具 + 建置工具並無太大差異。但需特別注意：雖然「預設包」本質上是一組外掛的集合，當您想取得某個特定外掛的物件或方法時，必須從該外掛本身的命名空間存取，而不是從其所被包含的預設包命名空間取得。

  例如：即使 `@univerjs/core` 已包含於 `@univerjs/presets` 之中，您仍需自 `@univerjs/core` 的命名空間 `UniverCore` 取得所需內容。
</Callout>

#### 範例

```html
<head>
  <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/rxjs/dist/bundles/rxjs.umd.min.js"></script>
  <script src="https://unpkg.com/echarts@5.6.0/dist/echarts.min.js"></script>

  <script src="https://unpkg.com/@univerjs/presets/lib/umd/index.js"></script>

  <script src="https://unpkg.com/@univerjs/preset-sheets-core/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/preset-sheets-core/lib/umd/locales/zh-TW.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/@univerjs/preset-sheets-core/lib/index.css" />
  <style>
    html,
    body,
    #root,
    #app {
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="app"></div>

  <script>
    const { createUniver } = UniverPresets
    const { LocaleType, mergeLocales } = UniverCore
    const { UniverSheetsCorePreset } = UniverPresetSheetsCore

    const { univerAPI } = createUniver({
      locale: LocaleType.ZH_TW,
      locales: {
        [LocaleType.ZH_TW]: mergeLocales(UniverPresetSheetsCorezhTW),
      },
      presets: [UniverSheetsCorePreset()],
    })

    univerAPI.createWorkbook({ name: 'Test Sheet' })
  </script>
</body>
```

## 外掛模式 [#plugin-mode]

### 使用全域建置版本

與預設模式類似，Univer 也為每個外掛提供 UMD 套件；不同的是，您需要手動引入每一個外掛及其前置相依。這個流程相當繁瑣，我們**不建議**在未充分理解外掛機制（如外掛間依賴關係與樣式引入順序）前採用此方式。

#### 範例

```html
<head>
  <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/rxjs@7.8.1/dist/bundles/rxjs.umd.min.js"></script>
  <script src="https://unpkg.com/echarts@5.6.0/dist/echarts.min.js"></script>
  <script src="https://unpkg.com/@wendellhu/redi/dist/umd/index.js"></script>
  <script src="https://unpkg.com/@wendellhu/redi/dist/umd/react-bindings/index.js"></script>

  <script src="https://unpkg.com/@univerjs/core/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/ui/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/docs/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/docs-ui/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-ui/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-formula/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-formula-ui/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-numfmt/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-numfmt-ui/lib/umd/index.js"></script>

  <script src="https://unpkg.com/@univerjs/engine-formula/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/ui/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/docs-ui/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-ui/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-formula/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-numfmt/lib/umd/facade.js"></script>

  <script src="https://unpkg.com/@univerjs/design/lib/umd/locale/zh-TW.js"></script>
  <script src="https://unpkg.com/@univerjs/ui/lib/umd/locale/zh-TW.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets/lib/umd/locale/zh-TW.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-ui/lib/umd/locale/zh-TW.js"></script>
  <script src="https://unpkg.com/@univerjs/docs-ui/lib/umd/locale/zh-TW.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-formula-ui/lib/umd/locale/zh-TW.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-numfmt-ui/lib/umd/locale/zh-TW.js"></script>

  <link rel="stylesheet" href="https://unpkg.com/@univerjs/design/lib/index.css" />
  <link rel="stylesheet" href="https://unpkg.com/@univerjs/ui/lib/index.css" />
  <link rel="stylesheet" href="https://unpkg.com/@univerjs/docs-ui/lib/index.css" />
  <link rel="stylesheet" href="https://unpkg.com/@univerjs/sheets-ui/lib/index.css" />
  <link rel="stylesheet" href="https://unpkg.com/@univerjs/sheets-formula-ui/lib/index.css" />
  <link rel="stylesheet" href="https://unpkg.com/@univerjs/sheets-numfmt-ui/lib/index.css" />

  <style>
    html,
    body,
    #root,
    #app {
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="app"></div>

  <script>
    const { Univer, LocaleType, mergeLocales, UniverInstanceType } = UniverCore
    const { FUniver } = UniverCoreFacade
    const { defaultTheme } = UniverDesign
    const { UniverRenderEnginePlugin } = UniverEngineRender
    const { UniverFormulaEnginePlugin } = UniverEngineFormula
    const { UniverUIPlugin } = UniverUi
    const { UniverSheetsPlugin } = UniverSheets
    const { UniverSheetsUIPlugin } = UniverSheetsUi
    const { UniverDocsPlugin } = UniverDocs
    const { UniverDocsUIPlugin } = UniverDocsUi
    const { UniverSheetsFormulaPlugin } = UniverSheetsFormula
    const { UniverSheetsFormulaUIPlugin } = UniverSheetsFormulaUi
    const { UniverSheetsNumfmtPlugin } = UniverSheetsNumfmt
    const { UniverSheetsNumfmtUIPlugin } = UniverSheetsNumfmtUi

    const univer = new Univer({
      locale: LocaleType.ZH_TW,
      locales: {
        [LocaleType.ZH_TW]: mergeLocales(
          UniverDesignzhTW,
          UniverUizhTW,
          UniverSheetszhTW,
          UniverSheetsUizhTW,
          UniverDocsUizhTW,
          UniverSheetsFormulaUizhTW,
          UniverSheetsNumfmtUizhTW,
        ),
      },
    })

    univer.registerPlugin(UniverRenderEnginePlugin)
    univer.registerPlugin(UniverFormulaEnginePlugin)

    univer.registerPlugin(UniverUIPlugin, {
      container: 'app',
    })

    univer.registerPlugin(UniverDocsPlugin)
    univer.registerPlugin(UniverDocsUIPlugin)

    univer.registerPlugin(UniverSheetsFormulaPlugin)
    univer.registerPlugin(UniverSheetsFormulaUIPlugin)
    univer.registerPlugin(UniverSheetsNumfmtPlugin)
    univer.registerPlugin(UniverSheetsNumfmtUIPlugin)

    univer.createUnit(UniverInstanceType.UNIVER_SHEET, {})

    const univerAPI = FUniver.newAPI(univer)
  </script>
</body>
```

## 指定版本

unpkg 與 jsDelivr 均支援指定特定版本資源。以 unpkg 為例，若想使用 `x.y.z` 版本之 Univer，只需在 URL 中加入 `@<version>` 指定版本即可：

```diff
- https://unpkg.com/@univerjs/presets/lib/umd/index.js
+ https://unpkg.com/@univerjs/presets@x.y.z/lib/umd/index.js
```
